<template>
	<view>
		<view class="banner" @click="goDetail(banner)">
			<image class="banner-img" :src="banner.cover"></image>
			<view class="banner-title">{{banner.title}}</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="goDetail(value)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="value.cover"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.title}}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{value.author_name}}</text>
							<text>{{value.published_at}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var dateUtils = require('@/common/util.js').dateUtils;

	export default {
		data() {
			return {
				banner: {},
				listData: [],
				last_id: "",
				reload: false
			}
		},
		onLoad() {
			this.getBanner();
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.last_id = "";
			this.getBanner();
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getBanner() {
				let data = {
					column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
				};
				// uni.request({
				// 	url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
				// 	data: data,
				// 	success: (data) => {
				// 		uni.stopPullDownRefresh();
				// 		if (data.statusCode == 200) {
				// 			this.banner = data.data;
				// 		}
				// 	},
				// 	fail: (data, code) => {
				// 		console.log('fail' + JSON.stringify(data));
				// 	}
				// })
				this.banner = {
					author_name: "邱晓芬",
					cover: '/static/img/timg4.jpg',
					id: 107851,
					post_id: "5275790",
					published_at: "2019-12-18 12:52:02",
					title: "湖南 全面加强河道管理 重塑三湘秀美水域"
				}
			},
			getList() {
				var data = {
					column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
				};
				if (this.last_id) { //说明已有数据，目前处于上拉加载
					data.minId = this.last_id;
					data.time = new Date().getTime() + "";
					data.pageSize = 10;
				}
				// uni.request({
				// 	url: 'https://unidemo.dcloud.net.cn/api/news',
				// 	data: data,
				// 	success: (data) => {
				// 		if (data.statusCode == 200) {
				// 			let list = this.setTime(data.data);
				// 			this.listData = this.reload ? list : this.listData.concat(list);
				// 			this.last_id = list[list.length - 1].id;
				// 			this.reload = false;
				// 		}
				// 	},
				// 	fail: (data, code) => {
				// 		console.log('fail' + JSON.stringify(data));
				// 	}
				// })
				this.listData = [{
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg3.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "整治河道，我们在行动！"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg5.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "河道管理站1月18日工作动态"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18 15:00:05",
					title: "全市河道管理工作会议召开"
				}]
			},
			goDetail: function(e) {
				// 				if (!/前|刚刚/.test(e.published_at)) {
				// 					e.published_at = dateUtils.format(e.published_at);
				// 				}
				let detail = {
					author_name: e.author_name,
					cover: e.cover,
					id: e.id,
					post_id: e.post_id,
					published_at: e.published_at,
					title: e.title
				}
				uni.navigateTo({
					url: "./cpn/list2detail-detail?detailDate=" + encodeURIComponent(JSON.stringify(
						detail))						
				})
			},
			setTime: function(items) {
				var newItems = [];
				items.forEach((e) => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: dateUtils.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			}
		},
	}
</script>

<style>
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.uni-list:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-list::before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-hover {
		background-color: #eee;
	}

	.uni-list-cell::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-list .uni-list-cell:last-child::after {
		height: 0upx;
	}

	/* 图文列表 */
	.uni-media-list {
		padding: 22upx 30upx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		flex-direction: row;
	}

	.uni-navigate-right.uni-media-list {
		padding-right: 74upx;
	}

	.uni-pull-right {
		flex-direction: row-reverse;
	}

	.uni-pull-right>.uni-media-list-logo {
		margin-right: 0upx;
		margin-left: 20upx;
	}

	.uni-media-list-logo image {
		height: 100%;
		width: 100%;
	}


	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 30upx;
		font-size: 26upx;
		color: #8f8f94;
	}

	.uni-media-list-logo {
		width: 180upx;
		height: 140upx;
		margin-right: 20upx;
	}

	.uni-media-list-body {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;
		height: auto;
	}

	.uni-media-list-text-top {
		width: 100%;
		line-height: 36upx;
		font-size: 30upx;
		height: 74upx;
		font-size: 28upx;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
